    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}
        /resources/admin/easyui/ui/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}
        /resources/admin/easyui/css/wu.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}
        /resources/admin/easyui/css/icon.css" />
        <script type="text/javascript" src="${pageContext.request.contextPath}
        /resources/admin/easyui/js/jquery.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}
        /resources/admin/easyui/ui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}
        /resources/admin/easyui/ui/locale/easyui-lang-zh_CN.js"></script>
        </head>
        <body>
        <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',border:true,split:true," title="菜单管理" style="width:150px; padding:5px;">
        <ul id="wu-category-tree" class="easyui-tree"></ul>
        </div>
        <div data-options="region:'center',border:false">
        <!-- Begin of toolbar -->
        <div id="wu-toolbar">
        <div class="wu-toolbar-button">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAddMenu()" plain="true">添加按钮</a>
        </div>
        <div class="wu-toolbar-search">
        <label>关键词：</label><input class="wu-text" style="width:100px" id="search-value">
        <a id="search-btn" href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
        </div>
        </div>
        <!-- End of toolbar -->
        <table id="wu-datagrid" class="easyui-treegrid" toolbar="#wu-toolbar"></table>
        </div>
        </div>

        <style>
        .active {
        background: green;
        }
        </style>
        <!-- Begin of easyui-dialog -->
        <div id="wu-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px;
        padding:10px;">
        <form id="menu-form" method="post">
        <table>
        <tr>
        <td width="60" align="right">菜单名称:</td>
        <td><input type="text" name="menu_name" id="menu_name" value="" class="wu-text" /></td>
        </tr>
        <tr>
        <td align="right">上级菜单:</td>
        <td>
        <select name="parentId" id="parentId" class="easyui-combobox" panelHeight="auto" style="width:100px">
        <c:forEach items="${topList}" var="list">
            <option value="${list.id}">${list.menu_name}</option>
        </c:forEach>
        </select>
        </td>
        </tr>
        <tr>
        <td align="right">菜单url:</td>
        <td><input type="text" name="url" id="url" value="" class="wu-text" /></td>
        </tr>
        <tr>
        <td valign="top" align="right">菜单图标:</td>
        <td>
        <input name="icon" id="add-icon" style="width:260px"
        data-options="required:true,missingMessage:'请填写菜单图标'"></input>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addIcon()" plain="true">添加图标</a>
        </td>
        </tr>
        </table>
        </form>
        </div>

        <%-- 编辑 --%>
        <div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px;
        padding:10px;">
        <form id="edit-form" method="post">
        <input type="hidden" id="edit_id" name="id"/>
        <table>
        <tr>
        <td width="60" align="right">菜单名称:</td>
        <td><input type="text" id="edit_menu_name" name="menu_name" value="" class="wu-text" /></td>
        </tr>
        <tr>
        <td align="right">上级菜单:</td>
        <td>
        <select id="edit_parentId" name="parentId" class="easyui-combobox" panelHeight="auto" style="width:100px">
        <c:forEach items="${topList}" var="list">
            <option value="1">${list.menu_name}</option>
        </c:forEach>
        </select>
        </td>
        </tr>
        <tr>
        <td align="right">菜单url:</td>
        <td><input id="edit_url" type="text" name="url" value="" class="wu-text" /></td>
        </tr>
        <tr>
        <td valign="top" align="right">菜单图标:</td>
        <td>
        <input id="edit_icon" name="icon" style="width:260px"
        data-options="required:true,missingMessage:'请填写菜单图标'"></input>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="addIcon()" plain="true">添加图标</a>
        </td>
        </tr>
        </table>
        </form>
        </div>

        <%-- 增加菜单start --%>
        <div id="add-menu-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
        style="width:400px;
        padding:10px;">
        <form id="add-menu-form" method="post">
        <table>
        <tr>
        <td width="60" align="right">按钮名称</td>
        <td><input type="text" name="menu_name" id="name" value="" class="wu-text" /></td>
        </tr>
        <tr>
        <td align="right">上级菜单</td>
        <td>
        <input type="hidden" name="parentId" id="add-menu-parent-id" value="" class="wu-text" />
        <input type="text" readonly="readonly" id="parent-menu" value="" class="wu-text" />
        </td>
        </tr>
        <tr>
        <td align="right">按钮事件</td>
        <td><input type="text" name="url" id="add-menu-url" value="" class="wu-text" /></td>
        </tr>
        <tr>
        <td valign="top" align="right">菜单图标:</td>
        <td>
        <input name="icon" id="add-menu-icon" style="width:260px"
        data-options="required:true,missingMessage:'请填写菜单图标'"></input>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addIcon()" plain="true">选择</a>
        </td>
        </tr>
        </table>
        </form>
        </div>
        <%-- 增加菜单end --%>


        <div id="icon-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
        style="height:500px;width:580px;
        padding:10px;">

        <form id="icon-form" method="post">
        <table id="icon-table">
        </table>
        </form>
        </div>
        <!-- End of easyui-dialog -->
        <script type="text/javascript">
        /*
        * 搜索
        * */
        $('#search-btn').click(function() {
        $('#wu-datagrid').treegrid('reload',{
        'menu_name': $('#search-value').val()
        })
        })


        function select_icon(e) {
        $('.icon-td').removeClass('active');
        $(e).parent('td').addClass('active');
        }

        function addIcon() {
        if ($('#icon-table').children().length <= 0) {
        $.ajax({
        url: '${pageContext.request.contextPath}/menu/select_icon',
        type: 'post',
        dataType: 'json',
        success: function(data) {
        if (data.type == 'success') {
        var icon = data.icons;
        var table = '';

        for(var i = 0; i < icon.length; i++) {
        var tbody = '<td class="icon-td"><a id="icon" onclick="select_icon(this)" href="javascript:void(0)" class="'+
        icon[i] +'" plain="true" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>';
        if (i == 0) {
        table += '<tr>' + tbody;
        continue;
        }

        if ((i+1) % 24 === 0) {
        table += tbody + '</tr><tr>';
        continue;
        }
        table += tbody;
        }
        table += '</tr>';
        $('#icon-table').append(table);
        }else {

        }
        }
        })
        }
        $('#icon-form').form('clear');
        $('#icon-dialog').dialog({
        closed: false,
        modal:true,
        title: "添加菜单信息",
        buttons: [{
        text: '确定',
        iconCls: 'icon-ok',
        handler: function() {
        /*
        * 获取图标信息
        * */
        var iconName = $('.active a').attr('class');
        $('#add-icon').val(iconName);
        $('#edit_icon').val(iconName);
        $('#add-menu-icon').val(iconName);
        $('#icon-dialog').dialog('close');
        $('#wu-datagrid').datagrid('reload');
        }
        }, {
        text: '取消',
        iconCls: 'icon-cancel',
        handler: function () {
        $('#icon-dialog').dialog('close');
        }
        }]
        });
        }
        /**
        * Name 添加记录
        */
        function add(){
        var validate = $('#menu-form').form("validate");
        if(!validate) {
        $.message.alert("消息提示", "请检查你输入的数据!", "warning");
        return;
        }

        var data = $('#menu-form').serialize();

        var menu_name = $('#menu_name').val();

        $.ajax({
        url:'${pageContext.request.contextPath}/menu/add_menu',
        data: data,
        type: 'post',
        dataType:'json',
        success:function(data){
        if(data.type == 'success'){
        $.messager.alert('信息提示','提交成功！','info');
        $('#wu-dialog').dialog('close');
        $('#icon-dialog').dialog('close');
        $('#wu-datagrid').treegrid('reload');
        }
        else
        {
        $.messager.alert('信息提示','提交失败！','info');
        }
        }
        });
        }

        /**
        * Name 修改记录
        */
        function edit(){
        // var validate = $('#menu-form').form("validate");
        // if(!validate) {
        // $.message.alert("消息提示", "请检查你输入的数据!", "warning");
        // return;
        // }

        var data = $('#edit-form').serialize();

        // var edit_form = $('#menu_name').val();
        // console.log(edit_form)
        $.ajax({
        url:'${pageContext.request.contextPath}/menu/edit_menu',
        data: data,
        type: 'post',
        dataType:'json',
        success:function(data){
        if(data.type == 'success'){
        $.messager.alert('信息提示',data.msg,'info');
        $('#edit-dialog').dialog('close');
        $('#icon-dialog').dialog('close');
        $('#wu-datagrid').treegrid('reload');
        }
        else
        {
        $.messager.alert('信息提示',data.msg,'info');
        }
        }
        });
        }

        /**
        * Name 删除记录
        */
        function remove(){
        $.messager.confirm('信息提示','确定要删除该记录？', function(result){
        if(result){
        var item = $('#wu-datagrid').datagrid('getSelected');
        if (item.id == null) {
        $.messager.alert('信息提示', '请选择要删除的菜单', 'warning');
        return;
        }
        //alert(ids);return;
        $.ajax({
        url:'${pageContext.request.contextPath}/menu/delete_menu',
        data:{id: item.id},
        success:function(data){
        if(data.type == 'success'){
        $.messager.alert('信息提示','删除成功！','info');
        $('#wu-datagrid').treegrid('reload');
        }
        else
        {
        $.messager.alert('信息提示',data.msg,'info');
        }
        }
        });
        }
        });
        }

        function addMenu() {
        var data = $('#add-menu-form').serialize();
        console.log(data)

        $.ajax({
        url:'${pageContext.request.contextPath}/menu/add_menu',
        data: data,
        type: 'post',
        dataType:'json',
        success:function(data){
        if(data.type == 'success'){
        $.messager.alert('信息提示','提交成功！','info');
        $('#wu-dialog').dialog('close');
        $('#icon-dialog').dialog('close');
        $('#add-menu-dialog').dialog('close');
        $('#wu-datagrid').treegrid('reload');
        }
        else
        {
        $.messager.alert('信息提示','提交失败！','info');
        }
        }
        });
        }

        /**
        * Name 打开添加窗口
        */
        function openAddMenu(){
        var item = $('#wu-datagrid').treegrid('getSelected');
        if (item == null) {
        $.messager.alert("信息提示", "请选择要添加的菜单", "info");
        return;
        }

        if (item.parentId == 0) {
        $.messager.alert("信息提示", "请选择一个二级菜单", "info");
        return;
        }

        var parent = $('#wu-datagrid').treegrid('getParent', item.id)
        if (parent.parentId != 0) {
        $.messager.alert("信息提示", "请选择一个二级菜单", "info");
        return;
        }

        $('#add-menu-form').form('clear');
        $('#add-menu-dialog').dialog({
        closed: false,
        modal:true,
        title: "添加菜单信息",
        buttons: [{
        text: '确定',
        iconCls: 'icon-ok',
        handler: addMenu
        }, {
        text: '取消',
        iconCls: 'icon-cancel',
        handler: function () {
        $('#wu-dialog').dialog('close');
        }
        }],
        onBeforeOpen: function() {
        $('#parent-menu').val(item.menu_name)
        $('#add-menu-parent-id').val(item.id)
        }
        });
        }

        /*
        * 打开添加菜单按钮
        * */
        function openAdd(){
        $('#menu-form').form('clear');
        $('#wu-dialog').dialog({
        closed: false,
        modal:true,
        title: "添加菜单信息",
        buttons: [{
        text: '确定',
        iconCls: 'icon-ok',
        handler: add
        }, {
        text: '取消',
        iconCls: 'icon-cancel',
        handler: function () {
        $('#wu-dialog').dialog('close');
        }
        }]
        });
        }

        /**
        * Name 打开修改窗口
        */
        function openEdit(){
        $('#edit-form').form('clear');
        var item = $('#wu-datagrid').datagrid('getSelected');
        if (item == null || item.length == 0) {
        $.messager.alert('信息提示','请选择一条记录！','warning');
        return
        }

        $('#edit-dialog').dialog({
        closed: false,
        modal:true,
        title: "修改信息",
        buttons: [{
        text: '确定',
        iconCls: 'icon-ok',
        handler: edit
        }, {
        text: '取消',
        iconCls: 'icon-cancel',
        handler: function () {
        $('#edit-dialog').dialog('close');
        }
        }],
        onBeforeOpen: function() {
        $('#edit_id').val(item.id);
        $('#edit_menu_name').val(item.menu_name);

        $('#edit_parentId').combobox('readonly', false);

        var parent = $('#wu-datagrid').treegrid('getParent', item.id);
            $('#edit_parentId').combobox('setValue',parent.menu_name);
        if (parent.parentId != null) {
        if (parent.parentId != 0) {
        $('#edit_parentId').combobox('setText', item.menu_name);
        $('#edit_parentId').combobox('readonly', true);
        }
        }


        $('#edit_url').val(item.url);
        $('#edit_icon').val(item.icon);
        }
        });
        }


        /**
        * Name 载入数据
        */
        $('#wu-datagrid').treegrid({
        url:'${pageContext.request.contextPath}/menu/list',

        rownumbers:true,
        singleSelect:true,
        pageSize:20,
        pagination:true,
        multiSort:true,
        fitColumns:true,
        fit:true,
        idField: 'id',
        treeField: 'menu_name',
        columns:[[
        { field:'menu_name',title:'菜单名称',width:100},
        { field:'url',title:'菜单url',width:100},
        { field:'icon',title:'菜单icon',width:100, formatter: function(value, row, index) {
        var test = '<a class="'+ value +'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
        return test + value;
        }},
        ]]
        });
        </script>
        </body>
        </html>